<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			直播列表
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height+ 45 + 'px'}" class="search-conten">
			<!-- <view class="search-box" :style="{top: vuex_custom_bar_height + 'px'}">
				<tn-input class="search-input" v-model="title" />
				<view class="search-btn" @click="search">搜索</view>
			</view> -->
			<view class="search-tab" :style="{top: vuex_custom_bar_height + 'px'}">
				<tn-tabs :list="tabList" :isScroll="false" :current="current" name="tabName" @change="changeTab">
				</tn-tabs>
			</view>
			<preview-list :dataList="liveData" @refreshLive="refreshLive"></preview-list>
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more>
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="list"
				v-if="liveData.length == 0"></tn-empty>
		</view>
	</view>
</template>

<script>
	import {
		getAllLiveList
	} from '@/util/index.js'
	export default {
		data() {
			return {
				title: '',
				page: 1,
				limit: 20,
				liveData: [],
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				tabList: [{
					tabName: '按热度'
				}, {
					tabName: '按时间'
				}],
				current: 0,
				orderType: 0,
				expertId: '',
				liveTypeId: '',
				tagId: ''
			};
		},
		onLoad(option) {
			if (option.expertId) {
				this.expertId = option.expertId
			}
			if (option.liveTypeId) {
				this.liveTypeId = option.liveTypeId
				this.tagId = option.tagId
			}
			this.getList()
		},
		methods: {
			getList() {
				getAllLiveList({
					page: this.page,
					limit: this.limit,
					orderType: this.orderType,
					expertId: this.expertId,
					liveTypeId: this.liveTypeId || '',
					tagId: this.tagId || ''
				}).then((res) => {
					if (this.liveData.length < res.total) {
						this.liveData = this.liveData.concat(res.list)
					} else {
						this.loadStatus = 'noMore'
					}
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			refreshLive() {
				this.page = 1
				this.liveData = []
				this.getList()
			},
			changeTab(e) {
				this.current = e
				this.page = 1
				this.liveData = []
				this.orderType = e
				this.getList()
			},

		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.liveData = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.loadStatus == 'noMore') return
			this.page++;
			this.getList();
		},
	}
</script>

<style lang="less">
	.search-conten {}

	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 20rpx 20rpx;
		position: fixed;
		z-index: 11111;
		background-color: #FFFFFF;

		.search-input {
			padding: 0 40rpx;
			font-size: 34rpx;
			flex: 1;
			background-color: #eeeeee;
			border-radius: 40rpx;
			margin-right: 20rpx;
		}

		.search-btn {
			background-color: #FFFFFF;
			width: 150rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #01BEFF;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.search-tab {
		width: 100%;
		// padding: 20rpx 20rpx;
		position: fixed;
		z-index: 11111;
		background-color: #eeeeee;
	}

	.load-more {
		padding: 20rpx;
	}
</style>
